{% extends "base-admin.html" %}
{% block title %}发布公告{% endblock %}
{% block head %}
<link rel="stylesheet" href="../../static/highlight/styles/atom-one-dark.css">
<script src="../../static/highlight/highlight.js"></script>
<script type="text/javascript" src="../../static/markdown/marked.min.js"></script>
<script>hljs.highlightAll();</script>
{% endblock %}
<style>
    .container {
        position: absolute;
        bottom: 10px;
        left: 10px;
        height: 10px;
        width: calc(100% - 520px);
        margin: 0 auto;
        padding: 30px;
        background-color: #FFFFFF;
        border-radius: 5px;
    }

    .container > * {
        margin-bottom: 10px; /* 设置元素之间的外边距 */
        font-size: 16px;
    }

    .container-body {
        padding-left: 15px;
    }
</style>

{% block style_2 %}
<style>
    .title {
        font-size: 40px;
        color: #1ba595;
    }

    .container {
        overflow-y: hidden;
    }

    #preview {
        background-color: #f1f1f1;
    }

    #preview > * {
        margin-top: 15px;
    }

    #preview > * > * {
        margin-top: 5px;
    }

    #preview ol {
        padding-left: 30px;
        list-style-type: decimal;
    }

    #preview ul {
        padding-left: 30px;
        list-style-type: circle;
    }

    #text-edit {
        width: calc(90%);
        border: 2px solid rgba(0, 0, 0, 0.25);
        resize: none;
        overflow-y: unset;
        padding-left: 10px;
        background-color: #f1f1f1;
    }

    #operation #new-button {
        position: absolute;
        right: 180px;
        top: -10px;
        width: 120px;
        height: 30px;
        font-weight: bold;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        background-color: rgba(0, 255, 166, 0.9);
        cursor: pointer;
        pointer-events: all;
        box-shadow: 1px 2px 0 1px rgba(15, 15, 15, 0.6);
        font-size: 14px;
        margin: 10px 100px auto 0;
        align-self: center;
    }

    #operation #new-button:hover {
        filter: brightness(0.8);
        box-shadow: -1px -2px 0 1px rgba(15, 15, 15, 0.8);
    }

    #operation #post-button {
        position: absolute;
        right: 0;
        top: -10px;
        width: 120px;
        height: 30px;
        font-weight: bold;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        background-color: rgba(92, 241, 255, 0.9);
        cursor: pointer;
        pointer-events: all;
        box-shadow: 1px 2px 0 1px rgba(15, 15, 15, 0.6);
        font-size: 14px;
        margin: 10px 100px auto 0;
        align-self: center;
    }

    #operation #post-button:hover {
        filter: brightness(0.8);
        box-shadow: -1px -2px 0 1px rgba(15, 15, 15, 0.8);
    }

    #operation #post-button.disabled-button {
        background-color: #f1f1f1;
        cursor: none;
        pointer-events: none;
    }

    #operation #edit-button {
        position: absolute;
        right: 0;
        top: 60px;
        width: 62px;
        height: 30px;
        font-weight: bold;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        background-color: rgba(133, 255, 133, 0.8);
        cursor: pointer;
        pointer-events: all;
        box-shadow: 1px 2px 0 1px rgba(15, 15, 15, 0.6);
        font-size: 14px;
        margin: 10px 100px auto 0;
        align-self: center;
    }

    #operation #edit-button:hover {
        filter: brightness(0.8);
        box-shadow: -1px -2px 0 1px rgba(15, 15, 15, 0.8);
    }

    #operation #preview-button {
        position: absolute;
        right: 82px;
        top: 60px;
        width: 62px;
        height: 30px;
        font-weight: bold;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        background-color: rgba(133, 255, 133, 0.8);
        cursor: pointer;
        pointer-events: all;
        box-shadow: 1px 2px 0 1px rgba(15, 15, 15, 0.6);
        font-size: 14px;
        margin: 10px 100px auto 0;
        align-self: center;
    }

    #operation #preview-button:hover {
        filter: brightness(0.8);
        box-shadow: -1px -2px 0 1px rgba(15, 15, 15, 0.8);
    }

    #operation #preview-button.disabled-button {
        background-color: #f1f1f1;
        cursor: none;
        pointer-events: none;
    }

    #operation #edit-button.disabled-button {
        background-color: #f1f1f1;
        cursor: none;
        pointer-events: none;
    }
</style>
{% endblock %}

{% block card %}
<div class="layui-card-header"><h2>发布公告</h2></div>{% endblock %}
{% block body %}
<form class="layui-form" method="post" id="searchForm" enctype="multipart/form-data">
    {{ form.csrf_token }}
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md6">
                    <label class="layui-form-label">公告标题：</label>
                    <div class="layui-input-inline">
                        {{ form.title(class="layui-input",style="width:250px",oninput="showTitle(event)") }}
                    </div>
                </div>
                <div class="layui-col-md4">
                    {{ form.file(class="layui-input-block", accept=".md,.txt") }}
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-inline" style="display: none">{{ form.submit(class="layui-btn", id="post")
                        }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<p style="color: #0aaeb3;font-size: 20px;margin-bottom: 15px">预览</p>
<div class="operation" id="operation">
    <button id="new-button" onclick="newFile()">新建公告</button>
    <button id="post-button" class="disabled-button" onclick="postData()">发布公告</button>
    <button id="edit-button" class="disabled-button" onclick="showEdit()">编辑</button>
    <button id="preview-button" class="disabled-button" onclick="showPreview()">预览</button>
</div>
<div class="container" id="container">
    <h1 class="title" id="title-show"></h1>
    <hr style="border: none; height: 3px; background-color: rgba(12,12,12,0.4)"/>
    <div class="container-body" id="container-body">
        <textarea id="text-edit" readonly="readonly" oninput="checkInput(event)"></textarea>
        <div id="preview"></div>
    </div>
</div>

<a href="/announcement/" id="open-announcement" style="display: none" target="_blank"></a>

{% endblock %}

{% block script %}
<script>
    $(document).ready(function () {
        $("#li_5").addClass("height-light");
        $("#container").css({
            'margin': '0 auto',
            'padding': '30px',
            'background-color': '#f1f1f1',
            'border-radius': '5px',
            'overflow-y': 'scroll',
            'left': '260px',
            'bottom': '50px',
            'height': ($(window).height() - 350).toString() + "px",
        });
        $("#text-edit").css({
            'width': document.getElementById("container").offsetWidth - 100 + "px",
            'height': ($(window).height() - 420).toString() + "px",
            'padding': '10px',
        });
        $('#post').on('click', function () {
            let title = $("#title");
            // 文件元素
            let file = document.querySelector('[type=file]');
            let file_text = $("#text-edit");
            console.log(file_text.val())
            // 通过FormData将文件转成二进制数据
            let formData = new FormData();
            formData.append('title', title.val())
            // 将文件转二进制
            formData.append('file', file.files[0]);
            formData.append('file_text', file_text.val());
            $.ajax({
                url: "{{ url_for('post_announcement') }}",
                type: "post",
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.code === 200) {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.msg('发布成功', {time: 1000})
                        });
                        let t = document.getElementById("open-announcement");
                        t.href = "/announcement/" + data.id;
                        t.click()
                        file.after(file.clone().val(""));
                        file.remove();
                    } else {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.msg('发布失败,请检查标题或文件是否填写', {time: 2000});
                        });
                    }
                },
                fail: function () {
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.msg('发布失败', {time: 1000});
                    });
                }
            });
            return false;
        });
        $('#file').on('change', function (event) {
            let file = event.target.files[0];
            if (file) {
                // 检查文件扩展名
                let extension = file.name.split('.').pop().toLowerCase();
                if (extension === 'md' || extension === 'txt') {
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        let fileContent = e.target.result;
                        let container_edit = document.getElementById("text-edit");
                        container_edit.textContent = fileContent;
                        if (fileContent.length > 0) {
                            let title = document.getElementById("title");
                            console.log(title.value);
                            if (title.value.length > 0) {
                                let post = document.getElementById("post-button");
                                if (post.classList.contains("disabled-button")) {
                                    post.classList.remove("disabled-button");
                                }
                            }
                        }
                        showPreview();
                    };
                    reader.onerror = function (e) {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.error("文件读取出错: " + e.target.error, {time: 1000});
                        });
                    };
                    reader.readAsText(file); // 读取文本文件
                } else {
                    alert('请选择一个 Markdown (.md) 或纯文本 (.txt) 文件。');
                }
            }
        });
    });

    function showTitle(event) {
        let title = event.target.value;
        let post = document.getElementById("post-button");
        let text = document.getElementById("text-edit");
        $('#title-show').text(title);
        if (title.length === 0 || text.value.length === 0) {
            if (!post.classList.contains("disabled-button")) {
                post.classList.add("disabled-button");
            }
        } else {
            if (post.classList.contains("disabled-button")) {
                post.classList.remove("disabled-button");
            }
        }
    }

    /* 显示预览 */
    function showPreview() {
        let preview_button = document.getElementById("preview-button");
        let editor_button = document.getElementById("edit-button");
        let edit_field = document.getElementById("text-edit");
        let preview_field = document.getElementById("preview");
        /* 设置按钮样式 */
        if (!preview_button.classList.contains("disabled-button")) {
            preview_button.classList.add("disabled-button");
        }
        if (editor_button.classList.contains("disabled-button")) {
            editor_button.classList.remove("disabled-button");
        }
        /* 切换显示 */
        edit_field.hidden = true;
        preview_field.hidden = false;

        /* 显示预览 */
        let markdown = edit_field.value;
        preview_field.innerHTML = marked.parse(markdown);
        hljs.highlightAll();
    }

    /* 显示编辑 */
    function showEdit() {
        let preview_button = document.getElementById("preview-button");
        let editor_button = document.getElementById("edit-button");
        let edit_field = document.getElementById("text-edit");
        let preview_field = document.getElementById("preview");
        /* 设置按钮样式 */
        if (preview_button.classList.contains("disabled-button")) {
            preview_button.classList.remove("disabled-button");
        }
        if (!editor_button.classList.contains("disabled-button")) {
            editor_button.classList.add("disabled-button");
        }
        /* 切换显示 */
        edit_field.hidden = false;
        edit_field.readOnly = "";
        preview_field.hidden = true;
    }

    /* 覆盖原发布按钮 */
    function postData() {
        let post = document.getElementById("post");
        post.click();
    }

    /* 新建文件 */
    function newFile() {
        let text_field = document.getElementById("text-edit");
        if (text_field.value > 0) {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.confirm('确定新建一个公告并清空当前内容吗？', {icon: 3, title: '新建公告'}, function (index) {
                    // 清空文本
                    text_field.value = "";
                    layer.close(index);
                });
            });
        }
        showEdit();
    }

    function checkInput(event) {
        let text = event.target.value;
        let title = document.getElementById("title");
        let post = document.getElementById("post-button");
        if (text.length === 0 || title.value.length === 0) {
            if (!post.classList.contains("disabled-button")) {
                post.classList.add("disabled-button");
            }
        } else {
            if (post.classList.contains("disabled-button")) {
                post.classList.remove("disabled-button");
            }
        }
    }
</script>
{% endblock %}

